<template>
  <div>
  	<!--start 头部-->
  	<!--<div class="inside_header">
  		<mt-header fixed :title="vue_header_title">
			  <mt-button icon="back" @click="$router.go(-1)" slot="left"></mt-button>
			</mt-header>
  	</div>-->
  	<div class="sreePublic">
  		<div id="" style="text-align: center;">
  			<em class="iconfont" @click="$router.go(-1)">&#xe61f;</em>
  		</div>
			{{vue_header_title}}
  	</div>
  	<!--start 头部-->
  	<!--start content-->
  	<div class="content">
  		<div class="invoiceType">
  			<p>发票类型</p>
  			<div class="typeBtn clearfix">
  				<div class="fl" :class="{active:index==vue_invoiceType_index}" @click="vFun_invoiceType_select(index,item.value)" v-for="(item,index) in vue_invoiceType_dataList">{{item.name}}</div>
  			</div>
  		</div>
  		<div class="invoiceDetail">
  			<mt-field label="发票抬头" :disabled="vue_invoice_disabled" :state="vue_invoice_rule.invoiceTitle" placeholder="请输入发票抬头" v-model.trim="memberInvoiceData.invoiceTitle"></mt-field>
  			<mt-field label="发票内容" :disabled="vue_invoice_disabled" placeholder="请输入发票内容" v-model.trim="memberInvoiceData.invoiceContent"></mt-field>
  			<mt-field label="纳税人识别号" :disabled="vue_invoice_disabled" :state="vue_invoice_rule.invoiceTaxId" placeholder="请输入纳税人识别号" v-model.trim="memberInvoiceData.invoiceTaxId"></mt-field>
  			<mt-field label="地址" :disabled="vue_invoice_disabled" placeholder="请输入地址" v-model.trim="memberInvoiceData.invoiceAddress"></mt-field>
  			<mt-field label="电话" :disabled="vue_invoice_disabled" :state="vue_invoice_rule.invoicePhone" placeholder="请输入电话" v-model.trim="memberInvoiceData.invoicePhone"></mt-field>
  			<mt-field label="开户银行" :disabled="vue_invoice_disabled" placeholder="请输入开户银行" v-model.trim="memberInvoiceData.invoiceBank"></mt-field>
  			<mt-field label="银行账号" :disabled="vue_invoice_disabled" :state="vue_invoice_rule.invoiceAccount" placeholder="请输入银行账号" v-model.trim="memberInvoiceData.invoiceAccount"></mt-field>
  		</div>
  	</div>
  	<!--end content-->
  	<!--start footer-->
  	<div class="footer clearfix">
  		<div class="cancelBtn fl" @click="vFun_invoice_cancel">取消</div>
  		<div class="okBtn fl" @click="vFun_invoice_ok">确认</div>
  	</div>
  	<!--end footer-->
  </div>
</template>

<script>
export default {
  data () {
    return {
    	vue_header_title:'发票信息',  //头部title
    	vue_invoiceType_dataList:[
	    	{
	    		name:'不开发票',
	    		value:""
	    	},{
	    		name:'普通发票',
	    		value:"2"
	    	},{
	    		name:'增值税发票',
	    		value:"3"
	    	}
    	],  //发票类型btn
    	vue_invoiceType_index:1,  //选择了发票类型的第几个
    	vue_invoice_disabled:false,  //发票信息是否禁止输入
    	vue_invoice_rule:{  //发票信息校验
    		invoiceTitle:"",
    		invoiceTaxId:"",
    		invoicePhone:"",
    		invoiceAccount:""
    	},
    	memberInvoiceData:{
    		invoiceType:"",  //发票类型
    		invoiceTitle:"",  //发票抬头
    		invoiceContent:"",  //发票内容
    		invoiceTaxId:"",  //纳税人识别号
    		invoiceAddress:"",  //收票人地址
    		invoicePhone:"",  //收票人手机号 
    		invoiceBank:"",  //开户银行
    		invoiceAccount:"",  //开户账号
    	}
    	
    	
    }
  },
  methods:{
  	vFun_invoiceType_select(index,val){  //选择发票类型
  		this.vue_invoice_disabled=index===0?true:false;
  		this.vue_invoiceType_index=index;
  		this.memberInvoiceData.invoiceType=val;
  	},
  	vFun_invoice_cancel(){  //取消按钮
  		this.$router.go(-1);
  	},
  	vFun_invoice_ok(){  //确定按钮
  		
  		/* 
  		 *  页面做到了校验内容....................
  		 * 
  		 * */
  		
  		
  		
  		if(this.vue_invoiceType_index===0){
  			this.$router.go(-1);
  		}else{
  			if(!this.memberInvoiceData.invoiceTitle){
  				this.vue_invoice_rule.invoiceTitle="error";
  			}else{
  				this.vue_invoice_rule.invoiceTitle="success";
  				if(!this.memberInvoiceData.invoiceTaxId){
  					this.vue_invoice_rule.invoiceTaxId="error";
  				}else{
  					this.vue_invoice_rule.invoiceTaxId="success";
  					if(!this.memberInvoiceData.invoicePhone||this.Public.rules.phone.test(this.memberInvoiceData.invoicePhone)){
  					}
  				}
  			}
  		}
  		
  	}
  },
  mounted(){
  	
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.inside_header{
		height:1.2rem;
	}
	.content{
		background:#D2D3D9;
		margin-bottom:1.33rem;
		margin-top:1.2rem;
	}
	.invoiceType{
		width:10rem;
		background:#fff;
		margin-bottom:0.26rem;
		border-bottom:1px solid #BBBBBB;
		padding:0 10px;
	}
	.invoiceType>p{
		padding:5px 0;
	}
	.invoiceType .typeBtn>div{
		padding:5px 10px;
		border:1px solid #ccc;
		color:#ccc;
		margin-right:15px;
		margin-bottom:10px;
	}
	.invoiceType .typeBtn>div.active{
		border-color:#D50B0A;
		color:#D50B0A;
	}
	.invoiceDetail{
		background:#fff;
	}
	.footer{
		position:fixed;
		width:100%;
		height:1.33rem;
		left:0;
		bottom:0;
		line-height:1.33rem;
		border-top:1px solid #BBBBBB;
		background:#fff;
		font-size:0.5rem;
	}
	.footer .cancelBtn,.footer .okBtn{
		width:5rem;
		text-align:center;
	}
	.footer .cancelBtn{
		border-right:1px solid #ccc;
		color:#ccc;
	}.footer .okBtn{
		color:#fff;
		background:#D50B0A;
	}
</style>
